<template>
<!-- <div class="title" style="background-color: aquamarine">
                <label>登录</label>
  </div> -->
<div class="main">
    <a-row>
        <a-col :span="14" style="background-color: ;">
            <div class="imgLayout">
                <img src="@/components/loginIcon/login.jpg" style="width: 100%;height: 100%">
            </div>
        </a-col>
        <a-col :span="10" style="background-color: ;">
            <div class="login">
                <a-form :model="formState" name="normal_login" class="login-form">
                    <div class="input">
                        <a-form-item name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
                            <a-input addonBefore="用户名" v-model:value="formState.username" :size="size">
                                <template #prefix>
                                    <UserOutlined class="site-form-item-icon" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
                            <a-input-password addonBefore="密 &nbsp;&nbsp; 码" v-model:value="formState.password" :size="size">
                                <template #prefix>
                                    <LockOutlined class="site-form-item-icon" />
                                </template>
                            </a-input-password>
                        </a-form-item>
                    </div>

                    <div class="check">
                        <a-form-item>
                            <a-button :disabled="disabled" type="primary" shape="round" :size="size" html-type="submit" class="login-form-button" @click="getData" style="float: left;width: 40%;">
                                登录
                            </a-button>
                            <a-button :disabled="false" type="primary" shape="round" :size="size" html-type="submit" class="login-form-button" style="float: right;width: 40%;">
                                注册
                            </a-button>
                        </a-form-item>
                    </div>

                </a-form>

            </div>
        </a-col>
    </a-row>
</div>
</template>

<script>
import API from '@/config/axiosInstance';
import {
    defineComponent,
    reactive,
    computed,
    ref
} from 'vue';
import {
    UserOutlined,
    LockOutlined
} from '@ant-design/icons-vue';
import {
    message
} from 'ant-design-vue';
export default defineComponent({
    components: {
        UserOutlined,
        LockOutlined,
    },
    setup() {
        const formState = reactive({
            username: '',
            password: '',
            remember: true,
        });
        const disabled = computed(() => {
            return !(formState.username && formState.password);
        });
        return {
            size: ref('large'),
            formState,
            disabled,
        }
    },
    methods: {
        getData() {
            API({
                method: "post",
                url: "/user/login",
                data: {
                    "user": this.formState.username,
                    "password": this.formState.password
                }
            }).then(res => {
                //console.log(res)
                if (res.data.resCode = "200") {
                    window.localStorage.clear()
                    if (res.data.info.token) {
                        window.localStorage.setItem("token", res.data.info.token)
                        window.localStorage.setItem('user', this.formState.username)
                        window.sessionStorage.setItem("token", res.data.info.token);
                        window.sessionStorage.setItem('user', this.formState.username)
                        this.$router.push("/index")
                        message.success("登陆成功！");
                    }
                }
            })
        },
    },
});
</script>

<style scoped>
.title {
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 10vh;
    text-align: center;
}

.imgLayout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: white;
}

.login {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    min-width: 300px;
    background-color: white;
    /* border-radius: 10px; */
}

#components-form-demo-normal-login .login-form {
    min-width: 300px;
}

#components-form-demo-normal-login .login-form-button {
    width: 100%;
}

.main {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
    text-align: center;
    margin: 0 auto;
    background: wheat;
}
</style>
